<template>
	<view>
		<view class="catbox">
			<image class="cat" src="../../../static/img/cat.jpg" mode=""></image>
			小猫健康
		</view>
	
		<view class="wrap" style="padding-top:50rpx; padding-bottom: 80rpx;">
			<view class="reg-text u-p-b-50" >输入动态激活码</view>
			
			<u-message-input mode="box"   @finish="finish" :maxlength="6" :breathe="true"></u-message-input>
			
		</view>
		<foo />
		<!-- <view class="wraps">
			
			<u-form  class="form" :model="form" ref="uForm">
			<u-form-item  style="border: 1rpx solid #efefef; padding: 0 15px; margin-bottom: 20px; border-radius: 5px;" label-position='top' label-width="120"   prop="mobile">
					<u-input placeholder="请输入动态激活码" v-model="form.mobile" />
				</u-form-item>

			</u-form>
			<view class="btn">
				<u-button type="primary" shape="circle" @click="submit" :ripple="true" ripple-bg-color="#909399">提交
				</u-button>
			</view>
		</view> -->
	</view>
</template>
<script>
import foo from "../msg/footer.vue";
	export default {
		components: {
			foo
		},
		data() {
			return {
				htmls: null,
				show: false,
				checked: false,
				form: {
					mobile: '',
				},
				// rules: {
				// 	// 字段名称
				// 	mobile: [{
				// 			required: true,
				// 			message: '请输入动态激活码',
				// 			// trigger: ['change', 'blur'],
				// 		},
				// 		// {
				// 		// 	// 自定义验证函数，见上说明
				// 		// 	validator: (rule, value, callback) => {
				// 		// 		// 上面有说，返回true表示校验通过，返回false表示不通过
				// 		// 		// this.$u.test.mobile()就是返回true或者false的
				// 		// 		return this.$u.test.mobile(value);
				// 		// 	},
				// 		// 	message: '手机号码不正确',
				// 		// 	// 触发器可以同时用blur和change
				// 		// 	trigger: ['change', 'blur'],
				// 		// }
				// 	]
				// }
			};
		},
		onShow() {
			
		},
		methods: {
			
			finish(e){
				this.$u.api.getAuthorizeUrl({
					commandId: e,
				})
				.then(res => {
					if(res.code==500){
							this.$u.toast(res.msg);
					}else{
						window.location.href=res.data
					}
				});
			}
			
			// submit() {
			// 	this.$refs.uForm.validate(valid => {
			// 		if (valid) {
						
			// 			if(!this.form.mobile){
			// 				this.$u.toast('激活码不能为空');
							
			// 				return
			// 			}
						
			// 			this.$u.api.getAuthorizeUrl({
			// 					commandId: this.form.mobile,
			// 				})
			// 				.then(res => {
			// 					console.log(res, 88888888);
			// 					if(res.code==500){
			// 							this.$u.toast(res.msg);
			// 					}else{
			// 						window.location.href=res.data
			// 					}
								
								
			// 				});
						
						
			// 			console.log('验证通过');
			// 		} else {
			// 			console.log('验证失败');
			// 		}
			// 	});
			// }
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>

<style scoped lang="scss">
	@import 'index.scss';
	.catbox{
		display: flex;
		align-items: center;
		margin: 40px 20px 20px;
		font-weight: bold;
		font-size: 20px;
		image{
			width: 54px;
			height: 54px;
			margin-right: 10px;
		}
	}
	.reg-text{
		// font-weight: bold;
		font-size: 18px;
	}
	.remind-text {
		padding: 30rpx 70rpx;
		color: #666666;
	
		em {
			font-weight: bold;
			color: #242424;
			font-style: normal;
			margin: 0 5px;
		}
	}
	
	.wraps{
		padding-top: 150px;
		
	}
	.tips {
		padding: 0 30rpx;
		color: rgb(51, 51, 51);

		p {
			text-align: justify;
			margin-bottom: 10rpx;
		}
	}

	/deep/ .u-checkbox__label {
		margin-right: 0 !important;
	}

	.radio {

		padding: 20rpx 50rpx;
		font-size: 24rpx;
		color: rgb(51, 51, 51);

		span {
			color: rgb(59, 156, 253);
		}
	}

	img {
		width: 100%;
		display: block;
		height: auto;
	}

	.btn {
		margin: 0 50rpx;
	}

	// 858 222 832
	.form {
		padding: 0 50rpx;
	}
</style>
